<template>
  <div class="container">


    <el-table :data="groupList" stripe border style="height: 100%"  >
      <el-table-column type="expand">
        <template #default="props">
<div style="padding: 8px;background-color: #ebebeb">
  <el-row style="color: red">
    明细：
  </el-row>
  <el-table :data="props.row.list" border height="400" show-summary     :row-class-name="tableRowClassName">
    <el-table-column  label="序号" width="80">
      <template #default="{row, column, $index}">
        {{ $index + 1 }}
      </template>
    </el-table-column>
    <el-table-column label="存货编码" prop="inventoryCode" sortable/>
    <el-table-column label="批次号" prop="batchNo" sortable/>
    <el-table-column label="货位号" prop="wareLocationCode" sortable/>
    <el-table-column label="账面数量" prop="stockCount" sortable/>
    <el-table-column label="盘点数量" prop="checkCount" sortable/>
    <el-table-column label="差异（0正常 1异常）"   prop="result"  sortable>
    </el-table-column>
  </el-table>
</div>


        </template>


      </el-table-column>

      <el-table-column prop="en" label="序号" width="80">
        <template #default="{row, column, $index}">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="groupName" label="组名" width="120"/>
      <el-table-column prop="statusName" label="状态" sortable width="120">
        <template #default="{row, column, $index}">
          <el-tag :type="row.status===2?'success':'info'">{{ row.statusName }}</el-tag>
        </template>

      </el-table-column>

      <el-table-column prop="principalUserName" label="负责人" width="120">


      </el-table-column>
      <el-table-column prop="stockCount" label="账面数量" sortable min-width="120">
      </el-table-column>

      <el-table-column prop="checkCount" label="盘点数量" sortable min-width="120"/>
      <el-table-column prop="yingkui" label="盈亏数量" sortable min-width="120"/>
      <el-table-column prop="progress" label="数量进度" sortable min-width="120"/>


      <el-table-column prop="lineProgress" label="数量为0的行/全部" sortable min-width="120">

        <template #default="{row, column, $index}">

          {{ `${row.lineProgress}%【${row.lineProgressExt}】`}}
        </template>
      </el-table-column>
    </el-table>


  </div>


</template>
<script setup>
import {onMounted, ref, toRaw} from "vue";
import axios from "axios";
import {useIntervalFn} from "@vueuse/core";
import dayjs from "dayjs";


let groupList = ref()

let  token= "eyJhbGciOiJIUzUxMiJ9.eyJhY2Nlc3NfdG9rZW4iOiJ1c2VyXzQxOTY4YTk1NjA5NjQ3ZmQ5ZjRhMTNmYzg2OGUxZDBjIiwidWlkIjoiNGYwNTQxNjY3NTViMmZlMzVkMzk2NDYxM2UyYmUyZDkiLCJyb2xlIjpbIjcyMzIxMGE3LTk4M2QtNDNlZS04MjUwLTQ1M2U0Y2RlN2RmZCIsIjlmODUyNmUyLTc2ZDAtNGYxMy1hYmFiLWM0NDY5MzQ1Yjk4NiIsImM5NTFkZDQ5LTI1MjYtNDdmOS1iNzQxLTVkNWQyNTE2YjdmZCIsIjNiNTYxNmU1LTU5MjYtNGQ5My04ZmIwLWYwNjcyMGZlY2E2ZSIsIjJjYjA0NGVmLTVlMjYtNDc0Yy05MDdmLWQ1YTlmMTgxZjg2MiJdLCJuYW1lIjoi5pyx6ZuB5r-gIiwiZGVwSWQiOiIyYjliY2M4YjY2ZjAxOTRhNjg3MmE4MmEzY2JkOTM4ZiIsImVtcE5vIjoiUjAxNTYiLCJleHAiOjE3MDgzMjkwODEsImlhdCI6MTcwODMyMTg4MX0.XuldmJ1LlCnoQkqSZktZ8-YcwPSTjRKfUVmSvC6cgZY3O8hlrwBPB0zGbtm9plEvQpfEmcz2_3LTKZqLRlVKqw"
// let token = "eyJhbGciOiJIUzUxMiJ9.eyJhY2Nlc3NfdG9rZW4iOiJ1c2VyX2Y1MmU0NWQ2ZDE2NzQ1YzVhYTlkYjA4N2U5MDhkMWI2IiwidWlkIjoiNGYwNTQxNjY3NTViMmZlMzVkMzk2NDYxM2UyYmUyZDkiLCJyb2xlIjpbIjcyMzIxMGE3LTk4M2QtNDNlZS04MjUwLTQ1M2U0Y2RlN2RmZCIsIjNiNTYxNmU1LTU5MjYtNGQ5My04ZmIwLWYwNjcyMGZlY2E2ZSIsImM5NTFkZDQ5LTI1MjYtNDdmOS1iNzQxLTVkNWQyNTE2YjdmZCIsIjJjYjA0NGVmLTVlMjYtNDc0Yy05MDdmLWQ1YTlmMTgxZjg2MiJdLCJuYW1lIjoi5pyx6ZuB5r-gIiwiZGVwSWQiOiIyYjliY2M4YjY2ZjAxOTRhNjg3MmE4MmEzY2JkOTM4ZiIsImVtcE5vIjoiUjAxNTYiLCJleHAiOjE3MDM3NDgzOTIsImlhdCI6MTcwMzc0MTE5Mn0.v_6Fhtp6AOaTVIKbvxZwrRK38zM4YfhixTh3FDc9CF7zRJjailtiAVEJ7xWNg8KJhi0mgSs7Sp_GHZ2vxGiLKA"
const getDetail = async (item) => {
  return axios.post("http://192.168.100.11:30001/api/ros-scm/inventory/check/list/listDetailPage", {
    "pageSize": 5000,
    "pageIndex": 1,
    "condition": {
      "groupId": item.id
    }
  }, {
    headers: {
      Authorization: token
    }
  })
}


const getData = async () => {
  console.log(dayjs().format("HH:mm:ss") + "请求");
  axios.post("http://192.168.100.11:30001/api/ros-scm/inventory/check/list/group/listPage", {
    "pageSize": 100,
    "pageIndex": 1,
    "condition": {
      "checkListId": "5774b42dce57789b76022e0e57800c56"
    }
  }, {
    headers: {
      Authorization: token
    }
  }).then(async res => {
    let list = (res.data.data.list)


    for (let item of list) {
      let detailRes = await getDetail(item)
      let list = (detailRes.data.data.list);
      item.stockCount = _.round(_.sumBy(list, (item) => item.stockCount || 0),2)
      item.checkCount = _.round(_.sumBy(list, (item) => item.checkCount || 0),2)
      item.yingkui =_.round( _.sumBy(list, (item) => item.profitCount || 0),2)
      item.progress = _.round(item.checkCount * 100 / item.stockCount, 2) + "%"

      list.forEach(row=>{
        row.result=   +row.stockCount===(+row.checkCount)?0:1
      })
      item.list =(list)
      let lineProgress = list.filter(item => item.checkCount === 0).length / list.length * 100
      item.lineProgress = _.round(lineProgress, 2)
      item.lineProgressExt = `${list.filter(item => item.checkCount === 0).length}/${list.length}`
    }

    groupList.value = list;
  })
}


const tableRowClassName = ({
    row,
    rowIndex
}
) => {

  if ( +(toRaw(row).result) === 0) {
    console.log("'success-row'",toRaw(row),rowIndex)
    return 'success-row'
  }
  return ''
}

onMounted(() => {
  getData()

  useIntervalFn(() => {
    getData()
  }, 90 * 1000)
})

</script>




<style  >
.container {
  width: 100%;
  display: flex;
  height: 100vh; /* 使用视窗高度作为容器高度 */
  flex-direction: column;
}

.el-table .success-row {

  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
